<template>
	<view class="app app-bg">
		<u-swiper
			border-radius="0"
			height="880"
			:list="shifu.images"
			@click="checkMore"
		></u-swiper>
		<view class="base">
			<view class="info">
				<text class="text">{{ shifu.nickname }}</text>
				<view style="display: flex; align-items: center">
					<u-icon name="clock-fill" color="#3ab54a" size="32"></u-icon>
					<text style="color: #3ab54a; padding: 0 30rpx 0 10rpx">
						最近可约：{{ near }}
					</text>
					<text>已服务{{ shifu.order }}单</text>
				</view>
			</view>
			<view class="like" v-if="iLike" @tap="like(0)">
				<u-icon name="heart-fill" size="54" color="#ff8f1e"></u-icon>
				<text>{{ shifu.like }}</text>
			</view>
			<view class="like no" v-else @tap="like(1)">
				<u-icon name="heart-fill" size="54" color="#b6b6b6"></u-icon>
				<text style="margin-top: 4rpx">{{ shifu.like }}</text>
			</view>
		</view>
		<view class="content">{{ shifu.content || "-暂无介绍-" }}</view>
		<view class="save">
			<text class="title">保障</text>
			<view class="item" v-for="i in arr" :key="i.text">
				<image class="icon" :src="require('@/static/icon/' + i.src)"></image>
				<text style="margin-left: 8rpx">{{ i.text }}</text>
			</view>
		</view>
		<view class="save title">评价列表</view>
		<view class="cate">
			<text class="text" :class="{ sel: select === 0 }" @tap="choose(0)">
				全部({{ selectArr[0] }})
			</text>
			<text class="text" :class="{ sel: select === 1 }" @tap="choose(1)">
				有图({{ selectArr[1] }})
			</text>
			<text class="text" :class="{ sel: select === 2 }" @tap="choose(2)">
				其他({{ selectArr[2] }})
			</text>
		</view>
		<block v-for="item in comments" :key="item._id">
			<comment :info="item"></comment>
		</block>
		<view class="no_more" v-if="!hasMore">- 暂无更多 -</view>
		<view class="btns" v-if="!from">
			<view class="btn" @tap="jump">选择项目</view>
		</view>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖
import comment from "./components/comment"

export default {
	components: { comment },
	data() {
		return {
			// 基础信息
			from: "",
			sid: "",
			shifu: {
				avatar: "",
				lv: 0,
				area: "",
				order: 0,
				nickname: "",
				like: 0,
				images: [],
				content: "",
				shifu_time: [],
				agent_time: []
			},
			arr: [
				{ src: "icon_details_sm.png", text: "实名认证" },
				{ src: "icon_details_tui.png", text: "爽约包退" },
				{ src: "icon_details_zs.png", text: "资质证书" }
			],
			// 评价
			select: 0,
			selectArr: [0, 0, 0],
			pageIndex: 1,
			comments: [],

			hasMore: true,
			iLike: false,
			flag: true
		}
	},
	onLoad(opt) {
		if (opt.id) this.sid = opt.id
		if (opt.from) this.from = opt.from

		this.init()
		this.getComments()
	},
	computed: {
		near() {
			const { shifu_time, agent_time, service_time } = this.shifu
			let now = vk.pubfn.timeFormat(new Date(), "hh:mm")
			for (let i = 0; i < agent_time.length; i++) {
				let t = agent_time[i]
				let a = shifu_time.indexOf(t) === -1
				let b = service_time.indexOf(t) === -1
				if (t > now && a && b) return t
			}
			return "暂无"
		}
	},
	methods: {
		// 初始化
		init() {
			let that = this
			vk.myfn.callFunctionForCache({
				url: "client/pub.queryShifuDetail",
				loading: { name: "loading", that },
				data: { id: this.sid },
				success: res => {
					this.shifu = res.data
					this.iLike = res.iLike
					this.agent_str = res.agent_str
					this.agent_arr = res.agent_arr
					this.selectArr = res.count
				}
			})
		},
		// 收藏
		async like(type) {
			if (!this.flag) return
			this.flag = false
			if (!vk.checkToken()) {
				this.flag = true
				return vk.toast("请先前往登录", "none", 1000, () => {
					vk.navigateTo("/pages/login/login")
				})
			}
			if (type == 1) {
				this.iLike = true
				this.shifu.like++
			} else {
				this.iLike = false
				this.shifu.like--
			}
			await vk.callFunction({
				url: "client/user.updateShifuLike",
				data: { _id: this.sid }
			})
			this.flag = true
		},
		// 评价
		choose(index) {
			if (this.select === index) return
			this.select = index
			this.pageIndex = 1
			this.hasMore = true
			this.getComments()
		},
		getComments() {
			const { pageIndex, select, sid, hasMore } = this
			if (!hasMore) return
			vk.callFunction({
				url: "client/pub.queryShifuComments",
				data: { id: sid, select, pageIndex, pageSize: 10 }
			}).then(res => {
				this.comments = res.rows
				this.hasMore = res.hasMore
				vk.hideLoading()
			})
		},
		// 跳转
		jump() {
			vk.navigateTo("./service?id=" + this.sid)
		},
		// 查看大图
		checkMore(idx) {
			uni.previewImage({ urls: this.shifu.images, current: idx })
		}
	},
	onReachBottom() {
		if (!this.hasMore) return
		this.pageIndex++
		this.getComments()
	}
}
</script>

<style lang="scss" scoped>
.base {
	background-color: #ffffff;
	padding: 30rpx 0 28rpx 20rpx;
	display: flex;
	align-items: center;
	.info {
		font-size: 24rpx;
		line-height: 33rpx;
		color: #999999;
		flex: 1;
		.text {
			display: block;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			padding-bottom: 22rpx;
		}
	}
	.like {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		position: relative;
		width: 114rpx;
		color: #ff8f1e;
		&::before {
			content: "";
			position: absolute;
			width: 1rpx;
			top: 20rpx;
			bottom: 10rpx;
			left: 0;
			background-color: #d1d1d1;
		}
	}
	.no {
		color: #b6b6b6;
	}
}

.content {
	padding: 0 20rpx 30rpx;
	background-color: #ffffff;
	font-size: 26rpx;
	line-height: 42rpx;
}

.save {
	background-color: #ffffff;
	margin: 20rpx 0;
	padding: 24rpx 20rpx;
	display: flex;
	align-items: center;
}

.title {
	font-weight: bold;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	flex: 1;
	&::before {
		content: "";
		display: inline-block;
		width: 6rpx;
		height: 28rpx;
		background-color: #3ab54a;
		margin-right: 10rpx;
	}
}

.item {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 24rpx;
	flex: 1;
	.icon {
		width: 42rpx;
		height: 42rpx;
	}
}

.cate {
	display: flex;
	align-items: center;
	padding-bottom: 20rpx;
	.text {
		background-color: #dfdfdf;
		border-radius: 25rpx;
		color: #999999;
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		margin-left: 16rpx;
	}
	.sel {
		background-color: #3ab54a;
		color: #ffffff;
	}
}

.no_more {
	padding: 10rpx 10rpx 118rpx;
	text-align: center;
	color: #999999;
	font-size: 24rpx;
}

.btns {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	box-shadow: 0 -6rpx 20rpx rgba(0, 0, 0, 0.06);
	padding: 16rpx 30rpx;
	.btn {
		background-color: #3ab54a;
		border-radius: 38rpx;
		color: #ffffff;
		font-size: 28rpx;
		padding: 16rpx;
		text-align: center;
	}
}
</style>
